const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const svgToMiniDataURI = require('mini-svg-data-uri')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const toml = require('toml');
const json5 = require('json5');

module.exports = {
    // entry: './src/index.js',
    entry: {
        index: './src/index.js',
        another: './src/another-module.js'
    },

    output: {
        // 输出文件夹必须定义为绝对路径
        path: path.resolve(__dirname, '../dist'),
        // 打包前清理 dist 文件夹
        clean: true,
    },

    // 优化配置
    optimization: {
        splitChunks: { // SplitChunksPlugin
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[contenthash].css'
        }),

        // new HTMLWebpackPlugin()
        new HtmlWebpackPlugin({
            template: './index.html', //  // 打包生成的文件的模板
            // filename: 'app.html', // // 打包生成的文件名称。默认为index.html
            // 设置所有资源文件注入模板的位置。可以设置的值 true|'head'|'body'|false，默认值为 true
            inject: 'body',
            meta: { // 在目标的html页面中添加meta标签
                keywords: "webpack, webpack5",
                author: "吴大勋-千锋教育HTML5大前端教研院"
            },
            // 如果设置了mode 其实是不需要主动设置的
            // minify: true, // 压缩html文件，生产环境默认为true,其余默认为false
        })
    ],


    // 配置资源文件
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            [
                                '@babel/plugin-transform-runtime'
                            ]
                        ]
                    }
                }
            },
            {
                test: /\.(jpg|png|svg)$/,
                type: 'asset', // 通用资源类型 `asset` ,  在导出一个 data URI 和发送一个单独的文件之间自动选择。
                parser: {
                    dataUrlCondition: { // 默认情况下，8kb为resource，生成图片，小于8KB，默认为base64
                        maxSize: 5 * 1024 // 5kb
                    }
                }
            },
            {
                test: /\.txt$/,
                type: 'asset/source'
            },
            {
                test: /\.css$/,
                // use: ['style-loader', 'css-loader']
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/i,
                // use: ['style-loader', 'css-loader', 'less-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
            },
            {
                test: /\.scss$/i,
                // use: ['style-loader', 'css-loader', 'sass-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.stylus$/i,
                // use: ['style-loader', 'css-loader', 'stylus-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'],
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(csv|tsv)$/i,
                use: ['csv-loader'],
            },
            {
                test: /\.xml$/i,
                use: ['xml-loader'],
            },
            {
                test: /\.toml$/i,
                type: 'json',
                parser: {
                    parse: toml.parse,
                },
            },
            {
                test: /\.json5$/i,
                type: 'json',
                parser: {
                    parse: json5.parse,
                },
            },

        ]
    },
    // WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
    // 配置
    performance: {
        maxEntrypointSize: 10 * 1024 * 1024, // 10M
        maxAssetSize: 30 * 1024 * 1024, // 30M
        // 关闭webpack的性能提示
        hints: false
    }
}